import CheckIcon from "../icons/CheckIcon";
import classNames from "../utils/classNames";
import { FC, ReactElement } from "react";

interface MenuItemProps {
  checked?: boolean;
  icon?: ReactElement;
  isDisabled?: boolean;
  onClick(): void;
}

const MenuItem: FC<MenuItemProps> = ({
  checked = false,
  children,
  icon = null,
  isDisabled = false,
  onClick,
}) => (
  <li
    className={classNames({
      "rpv-core__menu-item": true,
      "rpv-core__menu-item--disabled": isDisabled,
    })}
    onClick={onClick}
  >
    <div className="rpv-core__menu-item-icon">{icon}</div>
    <div className="rpv-core__menu-item-label">{children}</div>
    <div className="rpv-core__menu-item-check">{checked && <CheckIcon />}</div>
  </li>
);

export default MenuItem;
